<style scoped>
.page {
  display: flex;
  justify-content: center;
}
.container {
  width: 678px;
  display: flex;
  flex-direction: column;
}
.content {
  padding: 32px;
  margin-top: 24px;
  border-radius: 16px;
  background-color: #fff;
}
.config-item {
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.limit_container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
}
.data_container {
  display: flex;
  flex-direction: column;
}
.data_container > .item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-block: 10px;
}
.data_container > .item > .number {
  display: flex;
  flex-direction: row;
  font-size: 24px;
  align-items: center;
}
.top-title {
  font-size: 32px;
}
.title {
  font-size: 18px;
  margin: 20px 0 12px;
}
.semibold {
  font-weight: bold;
}
.c_n500 {
  color: #5f717b;
}
.image {
  width: 24px;
  height: 24px;
  margin-left: 8px;
}
.el-button--medium {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 4px;
}
.line {
  height: 1px;
  background-color: #e3e7ea;
  margin-top: 16px;
}
.input_container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.edit_card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.edit_item {
  width: 45%;
}
.edit_item > .tips {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 8px;
}
.store_btn {
  width: 120px;
  height: 56px;
  margin-top: 24px;
  font-size: 16px;
}
</style>

<template>
  <div class="page">
    <div class="container" >
      <div class="top-title semibold">代幣配額</div>
      <div class="content" >
        <div class="config-item" v-for="(item, index) in dataList" :key="index">
          <div class="limit_container">
            <div class="left_container">
              <div class="title semibold">{{ item[0].memberTypeId.memberTypeDesc }}</div>
            </div>
            <el-button
              type="danger"
              link
              class="el-button--medium"
              @click="editToken(index)"
            >
              更改
            </el-button>
          </div>
          <div class="data_container">
            <div class="item" v-for="(ite, ind) in item" :key="ind">
              <div class="medium c_n500">{{ ite.permissionDescription }}</div>
              <div class="number">
                <div class="semibold">{{ ite.asset }}{{ ite.unitDesc }}</div>
              </div>
            </div>
          </div>
          <div v-if="id == index" class="input_container">
            <div class="edit_card">
              <div class="edit_item" v-for="(ite, ind) in item" :key="ind">
                <div class="title semibold">{{ ite.permissionDescription }}</div>
                <el-input
                  v-model="ite.newAsset"
                  placeholder="Token用量"
                  clearable
                  size="large"
                  class="input"
                />
              </div>
            </div>
            <el-button type="danger" class="store_btn" @click="save">
              儲存
            </el-button>
          </div>
		  <div class="line"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import { ElLoading, ElMessage } from "element-plus";

export default {
  name: "userList",
  data() {
    return {
      searchParam: {
        id: "",
        status: "",
        type: 1,
      },
      dataList: [],
      page: 1,
      pageSize: 20,
      dataTotal: 0,
      input: "",
      id: -1,
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    async save() {
		this.dataList[this.id].forEach(async (item, index) => {
			const params = {
				id: item.id,
				asset: item.newAsset
			};
			const loading = ElLoading.service();
			const res = await request.PUT("/sys/member/query/config", params);
			loading.close();
			if (res.status == 100100) {
				item.newAsset = "";
				if (index == this.dataList[this.id].length - 1) {
					this.getDataList()
					ElMessage.success("储存成功！");
				}
			} else {
				ElMessage.error(res.message);
			}
		})
    },
    async getDataList() {
      const res = await request.GET("/sys/member/query/config", {});
      if (res.status == 100100) {
        this.dataList = [res.data.regular_member, res.data.platinum_member, res.data.distinguished_member];
      }
    },
    editToken(num) {
      this.id = num;
    },
  },
};
</script>
